<template>
  <div class="restPassword">
    <el-form ref="ruleForm"  :model="form" label-width="120px">
      <el-form-item label="新密码" prop="password">
        <el-input v-model="form.password" show-password/>
      </el-form-item>

      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile" @blur="Verification" /><el-button v-if="showSendCode" class="btn" @click="sendCode">发送验证码</el-button><div class="countDown" v-if="!showSendCode"><span>{{count}}</span>秒后重新发送</div>
      </el-form-item>
      <p v-if="tipShow" style="color:red;padding: 0;margin-top:-12px;margin-left: 50px;">温馨提示：手机号码格式错误！</p>

      <el-form-item label="验证码" prop="verifyCode">
        <el-input v-model="form.verifyCode" />
      </el-form-item>

    </el-form>

    <div style="text-align: center;">
      <el-button type="primary" @click="onSubmit('ruleForm')">确认</el-button>
      <el-button @click="onCancel">关闭</el-button>
    </div>

  </div>
</template>

<script>
import crypto from 'crypto'
import request from '@/utils/request'
import axios from 'axios'
import qs from 'qs';
export default {
  data() {
    return {
      form:{},
      showSendCode:true,
      btnShow:false,
      count:"59",
      tipShow:false,
    }
  },
  created() {
    
  },
  mounted() {

  },
  methods: {
    Verification(){
      if(!(/^1[3456789]\d{9}$/.test(this.form.mobile))){ 
        this.tipShow = true;
      } else{
        this.tipShow = false;
      }
    },
    sendCode(){
      if((/^1[3456789]\d{9}$/.test(this.form.mobile))){
        var _slef = this;
        // _slef.showSendCode = false;
        // var count = 59;
        // var time1 = setInterval(function(){
        //   count --;
        //   _slef.count = count;
        //   if(count == -1){
        //     clearInterval(time1);
        //     _slef.showSendCode = true;
        //     _slef.count = 59;
        //   }
        // },(1000))
        var data1 = {
          mobile:_slef.form.mobile,
          type:'FORGET'
        }
        axios({
          method:'post',
          url:'/api/sysUser/getVerifyCode',
          data:qs.stringify(data1)
        }).then((res) => {
          if(res.data.status == 200){
            this.$message(res.data.data);
             _slef.showSendCode = false;
            var count = 59;
            var time1 = setInterval(function(){
              count --;
              _slef.count = count;
              if(count == -1){
                clearInterval(time1);
                _slef.showSendCode = true;
                _slef.count = 59;
              }
            },(1000))
          }else{
            this.$message(res.data.message);
          }
        })
        }
    },
     onSubmit(ruleForm) {
      var _slef = this;
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          var md5 = crypto.createHash('md5');
          md5.update(_slef.form.password + 'zmzncs2017abc');
          _slef.form.password = md5.digest('hex');
          axios({
            method:'post',
            url:'/api/sysUser/retrievePassword',
            data:qs.stringify(_slef.form),
          }).then((res) => {
            if(res.data.status == 200){
                this.$message('密码修改成功');
                _slef.showSendCode = true;
                this.$emit('closeDialog', false);
            }else{
              this.$message('密码修改失败')
            }
          }).catch((err) => {
            this.buttonLoading = false;
            this.$message(err)
          })
        } else {
          this.$message({
            message: '密码修改失败',
            type: 'warning'
          })

          return false;
        }
      });
    },
    onCancel() {
      this.$emit('closeDialog', false);
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.login-container .el-input /deep/ input {
  color: #000;
  font-size: 18px;
}
.btn,
.countDown{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.countDown{
  border-radius: 4px;
  padding:1px 10px;
  background-color: #fff;
  font-size: 12px;
}
.countDown span{
  font-size: 18px;
  margin-right: 2px;
}
</style>
